<template>
    <el-dialog :title="添加部门" :model-value="props.showDialog" @click="close">
      <el-divider style="margin-top: -10px;"/>
        <el-form style="margin-left: 50px;" :model="formDate" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="上级部门:" prop="superiorDept">
                <el-tree-select size="large" v-model="formDate.superiorDept" :data="data" :render-after-expand="false" placeholder="请选择"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门名称:" prop="deptName">
                <el-input placeholder="请输入" v-model="formDate.deptName" size="large"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="排序:" prop="ord">
                <el-select placeholder="请选择" size="large" v-model="formDate.ord"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
             <el-form-item label="状态：" prop="status">
              <el-radio-group v-model="radio">
              <el-radio :label="0">启用</el-radio>
              <el-radio :label="1">停用</el-radio>
              <!-- <template v-slot="{row}">
                <span>{{ row.status===0?'启用':row.status===1?'停用':'无' }}</span>
              </template> -->
            </el-radio-group>
             </el-form-item>
          </el-row>
          <el-row type="flex" style="justify-content: center;">
            <el-button type="info" style="border-radius: 20px">取消</el-button>
            <el-button type="primary" style="border-radius: 20px">确定</el-button>
          </el-row>
        </el-form>
    </el-dialog>
</template>

<script setup>
import {ref} from "vue"
const formDate=ref({
  superiorDept:'',   //上级部门
  deptName:'',       //部门名称
  ord:null,            //排序规则
  status:null         //状态
})
const props = defineProps({
    showDialog: {
        type: Boolean,
        default: false
    }
})
//关闭弹层
const emit=defineEmits(['update:showDialog'])
const close=()=>{
  emit('update:showDialog',false)
}
//表单校验
const rules=ref({
  superiorDept:[
    {required: true, message: '请选择上级部门', trigger: 'blur'}
  ],
  deptName:[
    {required: true, message: '请输入部门名称', trigger: 'blur'},
    {min:1,max:12, message: '字符为1-12个字符', trigger: 'blur'}
  ],
  ord:[
    {required: true, message: '请选择部门', trigger: 'blur'}
  ],
})
</script>